<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app {
            width: 500px;
        }

        ul {
            list-style: none;
            display: flex;
            padding-left: 0;
            margin: 0;
            background-color: #cdcdcd;
        }

        li {
            width: calc(100% / 3);
            text-align: center;
            padding: 14px 0;
            cursor: pointer;
        }

        .active {
            background-color: crimson;
        }
    </style>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="app">
        <ul>
            <li :class="{active:flag==1}" @click="change(1)">apple</li>
            <li :class="{active:flag==2}" @click="change(2)">orange</li>
            <li :class="{active:flag==3}" @click="change(3)">lemon</li>
        </ul>
        <div>
            <img src="img/apple.png" alt="" v-show="flag == 1">
            <img src="img/orange.png" alt="" v-show="flag == 2">
            <img src="img/lemon.png" alt="" v-show="flag == 3">
        </div>
        <h4>v-for</h4>
        <!-- stu 代表数组，item 每一个对象 -->
        <p v-for="item in stu">
            姓名：{{item.name}},年龄：{{item.age}},性别：{{item.sex}}
        </p>
        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>用户名</th>
                    <th>评分</th>
                    <th>职业</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in author" :key="item.id">
                    <td>{{item.id}}</td>
                    <td>{{item.username}}</td>
                    <td>{{item.score}}</td>
                    <td>{{item.classify}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            flag: 1,
            stu: [{
                name: '吴宇',
                age: 17,
                sex: '女'
            }, {
                name: 'last',
                age: 24,
                sex: '男'
            }, {
                name: '赵丽颖',
                age: 36,
                sex: '女'
            }],
            author: [{
                "id": 10000,
                "username": "user-0",
                "sex": "女",
                "city": "城市-0",
                "sign": "签名-0",
                "experience": 255,
                "logins": 24,
                "wealth": 82830700,
                "classify": "作家",
                "score": 57
            }, {
                "id": 10001,
                "username": "user-1",
                "sex": "男",
                "city": "城市-1",
                "sign": "签名-1",
                "experience": 884,
                "logins": 58,
                "wealth": 64928690,
                "classify": "词人",
                "score": 27
            }, {
                "id": 10002,
                "username": "user-2",
                "sex": "女",
                "city": "城市-2",
                "sign": "签名-2",
                "experience": 650,
                "logins": 77,
                "wealth": 6298078,
                "classify": "酱油",
                "score": 31
            }, {
                "id": 10003,
                "username": "user-3",
                "sex": "女",
                "city": "城市-3",
                "sign": "签名-3",
                "experience": 362,
                "logins": 157,
                "wealth": 37117017,
                "classify": "诗人",
                "score": 68
            }, {
                "id": 10004,
                "username": "user-4",
                "sex": "男",
                "city": "城市-4",
                "sign": "签名-4",
                "experience": 807,
                "logins": 51,
                "wealth": 76263262,
                "classify": "作家",
                "score": 6
            }, {
                "id": 10005,
                "username": "user-5",
                "sex": "女",
                "city": "城市-5",
                "sign": "签名-5",
                "experience": 173,
                "logins": 68,
                "wealth": 60344147,
                "classify": "作家",
                "score": 87
            }, {
                "id": 10006,
                "username": "user-6",
                "sex": "女",
                "city": "城市-6",
                "sign": "签名-6",
                "experience": 982,
                "logins": 37,
                "wealth": 57768166,
                "classify": "作家",
                "score": 34
            }, {
                "id": 10007,
                "username": "user-7",
                "sex": "男",
                "city": "城市-7",
                "sign": "签名-7",
                "experience": 727,
                "logins": 150,
                "wealth": 82030578,
                "classify": "作家",
                "score": 28
            }, {
                "id": 10008,
                "username": "user-8",
                "sex": "男",
                "city": "城市-8",
                "sign": "签名-8",
                "experience": 951,
                "logins": 133,
                "wealth": 16503371,
                "classify": "词人",
                "score": 14
            }, {
                "id": 10009,
                "username": "user-9",
                "sex": "女",
                "city": "城市-9",
                "sign": "签名-9",
                "experience": 484,
                "logins": 25,
                "wealth": 86801934,
                "classify": "词人",
                "score": 75
            }]
        },
        methods: {
            change(arg) {
                console.log(typeof arg);
                this.flag = arg;

            }
        },
    })
</script>

</html>